<template>
  <div style="padding: 10px">
    <el-card>
      <span v-if="this.Compare">
        <el-tag type="primary" size="medium">商品预售倒计时</el-tag>
      <el-tag type="danger" size="medium">{{ this.d }}</el-tag>
      天
      <el-tag type="danger" size="medium">{{ this.h }}</el-tag>
      :
      <el-tag type="danger" size="medium">{{ this.m }}</el-tag>
      :
      <el-tag type="danger" size="medium">{{ this.s }}</el-tag>
      </span>
      <span v-else>
        <el-tag type="primary" size="medium">秒杀还剩</el-tag>
      <el-tag type="danger" size="medium">{{ this.d }}</el-tag>
      天
      <el-tag type="danger" size="medium">{{ this.h }}</el-tag>
      :
      <el-tag type="danger" size="medium">{{ this.m }}</el-tag>
      :
      <el-tag type="danger" size="medium">{{ this.s }}</el-tag>
      </span>
      <el-button type="primary" size="medium" @click="ligout()" style="float: right">返回秒杀界面</el-button>
    </el-card>
    <el-row :gutter="0">
      <el-col :span="12">
        <!-- 图片-->
        <div class="left">
          <img class="leftImg" :src="this.file.simage" alt="">
          <!-- 鼠标层罩 -->
          <div v-show="topShow" class="top" :style="topStyle"></div>
          <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
          <div class="maskTop"
               @mouseenter="enterHandler"
               @mousemove="moveHandler"
               @mouseout="outHandler"></div>
        </div>

        <!--        <img :src="this.file.simage" alt="图片暂时无法显示"/>-->
      </el-col>
      <el-col :span="12">
        <div v-if="rShow" v-show="rShow" class="right">
          <img :style="r_img" class="rightImg" :src="this.file.simage" alt="">
        </div>
        <div v-else>
          <!-- 名字-->
          <div style="font-weight: 900">{{ this.file.sname }}</div>
          <!--        价格-->
          <div style="padding: 10px"></div>
          <div class="buydiv">原价￥<s>{{ this.file.sprices }}</s></div>
          <div><span style="padding: 10px;color: red;font-size: 20px">促销价￥{{
              this.file.sprices - this.file.sdiscount
            }}</span></div>
          <el-divider></el-divider>
          <!--        鞋码-->
          <el-form :rules="rules">
            <el-form-item prop="size" label="鞋码">
              <el-select v-model="size" placeholder="请选择尺码" style="width: 120px">
                <el-option v-for="item in sizeOptions" :key="item.sizeid" :label="item.sizenum" :value="item.sizenum">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <!--        数量-->
          <div class="buydiv">
            <el-tag size="medium">数量</el-tag>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="100"></el-input-number>
          </div>
          <!--        合计-->
          <div class="buydiv">
          <span class="buydivtext">
          <el-row>
            合计
            <el-button>{{ (this.file.sprices - this.file.sdiscount) * num }}</el-button>
          </el-row></span></div>
          <!--        购买-->
          <div class="buydiv">
            <el-button type="danger" plain @click="GoShoppingCart()">加入购物车</el-button>
            <el-button type="danger" @click="GoBuy()">立即购买</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="width: 100%">
      <el-descriptions :title="this.file.sname" size="medium" :column="3">
        <el-descriptions-item label="单件鞋总积分">{{ this.file.sintegral }}</el-descriptions-item>
        <el-descriptions-item label="颜色分类">{{ this.file.scolor }}</el-descriptions-item>
        <el-descriptions-item label="销量">{{ this.file.stimessold }}</el-descriptions-item>
        <el-descriptions-item label="上市时间">{{ this.file.spubtime }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ this.file.sgender }}</el-descriptions-item>
        <el-descriptions-item label="生产厂商">{{ this.file.sproducer }}</el-descriptions-item>
        <el-descriptions-item label="内容简介">{{ this.file.sdetail }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ this.file.sremarks }}</el-descriptions-item>
        <el-descriptions-item label="编号">{{ this.file.snum }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>


export default {
  name: "Buy",
  data() {
    return {
      num: 1,
      nums: [],
      size: 37,
      sizes: [],
      data: [],
      file: {},
      realPrice: 0,
      topStyle: {transform: ''},
      r_img: {},
      topShow: false,
      rShow: false,
      sizeOptions: [],
      seckills: [],
      end: '',
      start: '',
      d: 0,
      h: 0,
      m: 0,
      s: 0,
      Compare: false,
      count: '', //倒计时
      user: JSON.parse(localStorage.getItem("user")) ? JSON.parse(localStorage.getItem("user")) : "",
      rules: {
        size: [{
          required: true, message: '请选择尺码', trigger: 'blur'
        }],
      }
    }
  },

  created() {
    this.start = this.$route.query.start
    this.end = this.$route.query.end
    console.log(this.end)
    this.getRouterData()
    this.sizeLoad()
    this.countTime()
    this.CompareDate()
  },
  methods: {
    getRouterData() {
      this.file = localStorage.getItem("file")
          ? JSON.parse(localStorage.getItem("file"))
          : {};
      console.log(this.file)
    },
    sizeLoad() {
      axios.get("/sizes").then(res => {
        this.sizeOptions = res.data.data
      })
    },
    handleChange(value) {

    },
    ligout() {
      this.$router.push('/front/seckill')
      localStorage.removeItem("file")
    },// 鼠标进入原图空间函数
    enterHandler() {
      // 层罩及放大空间的显示
      this.topShow = true
      this.rShow = true
    },
    // 鼠标移动函数
    moveHandler(event) {
      // 鼠标的坐标位置
      let x = event.offsetX
      let y = event.offsetY
      // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = (x - 100) < 0 ? 0 : (x - 100)
      let topY = (y - 100) < 0 ? 0 : (y - 100)
      // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
      if (topX > 200) {
        topX = 200
      }
      if (topY > 200) {
        topY = 200
      }
      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.topShow = false
      this.rShow = false
    },//跳转到购物车
    GoShoppingCart() {
      if (!this.user.uid) {
        this.$message.error("请先登录")
        this.$router.push("/login")
      } else {
        axios.post("/shoppingcart/insert?uid=" + this.user.uid + "&sid=" + this.file.sid + "&scount=" + this.num + "&size=" + this.size).then(res => {
          this.$message.success(res.data.msg)
        })
        this.$router.push("/front/cart")
      }
    },
    CompareDate() {
      //设置当前时间
      var nowDate = new Date()
      var now = nowDate.getTime()
      //设置开始时间
      var startDate = new Date(this.start);
      var start = startDate.getTime();
      //预售说明当前时间小于秒杀开始时间 即 now<start Compare=true
      if (start - now > 0) {
        this.Compare = true
      }
    },
    countTime() {
      //设置当前时间
      var nowDate = new Date()
      var now = nowDate.getTime()
      //设置开始时间
      var startDate = new Date(this.start);
      var start = startDate.getTime();
      //设置截止时间
      var endDate = new Date(this.end);
      var end = endDate.getTime();
      //时间差
      if (start - now > 0) {
        var leftTime = start - now;
      } else {
        var leftTime = end - now;
      }

      //定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        this.m = Math.floor(leftTime / 1000 / 60 % 60);
        this.s = Math.floor(leftTime / 1000 % 60);
      }
      this.count = this.d + '天' + this.h + '时' + this.m + '分' + this.s + '秒'
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(this.countTime, 1000);
    },

    GoBuy() {
      if (!this.user.uid) {
        this.$message.error("请先登录")
        this.$router.push("/login")
      } else {
        if (this.Compare) {
          this.$message.warning("预售时间还没到哦！")
        } else {
          this.nums.push(this.num)
          this.data.push(this.file)
          this.sizes.push(this.size)
          localStorage.setItem("tableData", JSON.stringify(this.data))
          this.$router.push({
            path: "/front/preOrder",
            query: {
              totalPrice: ((this.file.sprices - this.file.sdiscount) * this.num),
              totaldiscount: ((this.file.sdiscount) * this.num),
              nums: this.nums,
              sizes: this.sizes,
            }
          })
        }

      }

    }
  }
}
</script>

<style>
.item:hover {
  color: #3a8ee6;
  background: none;
}

.buydiv {
  color: gray;
  padding: 10px;
  text-align: left;
}

.rightImg {
  display: inline-block;
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}

/* 右边的区域图片放大空间 */
.right {
  /*margin-left: 412px;*/
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}

/* 一个最高层层罩 */
.maskTop {
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

/* 层罩，通过定位将左上角定位到(0,0) */
.top {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
}

/* 原图的显示 */
.leftImg {
  width: 400px;
  height: 400px;
  display: inline-block;
}

/* 原图的容器 */
.left {
  width: 400px;
  height: 400px;
  border: 1px solid teal;
  float: left;
  position: relative;
}
</style>
